<template>
  <view class="container">
    <!-- 标签栏 -->
    <scroll-view class="tabs" scroll-x scroll-with-animation>
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-item" 
        :class="{ 'active': activeTab === index }"
        @click="switchTab(index)"
      >
        {{ tab.title }}
      </view>
    </scroll-view>

    <!-- 内容区域 -->
    <view class="content">
      <view v-for="(tab, index) in tabs" :key="index" v-if="activeTab === index" class="tab-content">
        <uni-table ref="table" :loading="tab.loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
          <uni-tr>
            <uni-th v-for="header in tab.columns" :key="header.key" :width="header.width" :align="header.align">
              {{ header.title }}
            </uni-th>
          </uni-tr>
          <uni-tr v-for="(item, rowIndex) in tab.data" :key="rowIndex">
            <uni-td v-for="(header, colIndex) in tab.columns" :key="colIndex">
              <!-- 处理序号列 -->
              <template v-if="header.key === 'index'">
                {{ rowIndex + 1 }}
              </template>
              <!-- 处理其他列 -->
              <template v-else>
                {{ item[header.key] }}
              </template>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前激活的标签索引
      tabs: [
        {
          title: '标签1',
          loading: false,
          columns: [
            { title: '序号', key: 'index', width: '20', align: 'center' },
            { title: '姓名', key: 'name', width: '150', align: 'center' },
            { title: '年龄', key: 'age', align: 'center' },
            { title: '性别', key: 'gender', width: '150', align: 'center' }
          ],
          data: [
            { name: '张三', age: '20', gender: '男' },
            { name: '李四', age: '22', gender: '女' },
            { name: '王五', age: '25', gender: '男' }
          ]
        },
        {
          title: '标签2',
          loading: false,
          columns: [
            { title: '序号', key: 'index', width: '20', align: 'center' },
            { title: '城市', key: 'city', width: '150', align: 'center' },
            { title: '人口', key: 'population', width: '150', align: 'center' },
            { title: '面积', key: 'area', width: '150', align: 'center' }
          ],
          data: [
            { city: '北京', population: '2154万', area: '16410.54平方千米' },
            { city: '上海', population: '2428.14万', area: '6340.5平方千米' },
            { city: '广州', population: '1530.59万', area: '7434.4平方千米' }
          ]
        },
        // {
        //   title: '标签3',
        //   loading: false,
        //   columns: [
        //     { title: '序号', key: 'index', width: '20', align: 'center' },
        //     { title: '水果', key: 'fruit', width: '150', align: 'center' },
        //     { title: '价格', key: 'price', width: '150', align: 'center' },
        //     { title: '产地', key: 'origin', width: '150', align: 'center' }
        //   ],
        //   data: [
        //     { fruit: '苹果', price: '5元/斤', origin: '山东' },
        //     { fruit: '香蕉', price: '3元/斤', origin: '海南' },
        //     { fruit: '橙子', price: '4元/斤', origin: '江西' }
        //   ]
        // }
      ]
    };
  },
  methods: {
    // 切换标签的方法
    switchTab(index) {
      this.activeTab = index;
    },
    // 处理表格选中行变化的方法
    selectionChange(selectedItems) {
      console.log('选中的行数据:', selectedItems);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.tabs {
  white-space: nowrap;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  display: inline-block;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  color: #007AFF;
  border-bottom: 4rpx solid #007AFF;
}

.content {
  padding: 20rpx 0;
}

.tab-content {
  font-size: 28rpx;
  color: #333;
}
</style>